<template>
  <basic-popup class="byt-listening" :show="show" @update:show="changeShow" width="230rpx">
    <template #default>
      <view class="byt-listening__content">
        <!-- 录音指示器 -->
        <view class="byt-listening__load">
          <view class="byt-listening__load--rect1 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect2 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect3 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect4 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect5 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect6 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect7 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect8 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect1 byt-listening__load-item"></view>
          <view class="byt-listening__load--rect2 byt-listening__load-item"></view>
        </view>

        <!-- 操作提示 -->
        <view class="byt-listening__tips">
          <view class="tips-icon">
            <image src="/static/arrow-up.png" mode=""></image>
          </view>
          <view class="tips-text">{{ tipsText }}</view>
        </view>
      </view>
    </template>
  </basic-popup>
</template>

<script>
import BasicPopup from '../../../../basic/basic-popup/basic-popup.vue';
export default {
  name: 'audio-listening',
  components: {
    BasicPopup
  },
  props: {
    show: {
      type: Boolean,
      value: false
    },
    cancelStatus: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    tipsText() {
      return this.cancelStatus ? '松开手指取消发送' : '上划取消，松开发送';
    }
  },
  methods: {
    changeShow(e) {
      console.log('点击了');
      this.$emit('update:show', e);
    }
  }
};
</script>

<style lang="scss" scoped>
.byt-listening {
  &__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx 0; // 减少上下内边距
    height: auto; // 让高度自适应内容
    min-height: 180rpx; // 设置最小高度，防止内容过少时容器过小

    // 添加弹性布局和溢出处理
    justify-content: space-around;
    box-sizing: border-box;
  }

  &__load {
    display: flex;
    justify-content: center;
    margin-bottom: -32rpx; // 减少底部间距

    &-item {
      background-color: #3378ffff;
      height: 88rpx; // 适当减小柱状图高度
      width: 10rpx; // 适当减小柱状图宽度
      margin-right: 5rpx; // 调整间距
      animation: stretchdelay 1s infinite ease-in-out;
    }

    &--rect2 {
      animation-delay: 0.1s;
    }

    &--rect3 {
      animation-delay: 0.2s;
    }

    &--rect4 {
      animation-delay: 0.3s;
    }

    &--rect5 {
      animation-delay: 0.4s;
    }

    &--rect6 {
      animation-delay: 0.5s;
    }

    &--rect7 {
      animation-delay: 0.6s;
    }

    &--rect8 {
      animation-delay: 0.7s;
    }
  }

  &__tips {
    display: flex;
    flex-direction: column;
    align-items: center;

    .tips-icon {
      margin-bottom: 8rpx; // 减少图标和文本间距

      image {
        width: 32rpx; // 适当减小图标大小
        height: 32rpx;
      }
    }

    .tips-text {
      color: #3378ffff;
      font-size: 22rpx; // 适当减小字体大小
      text-align: center;
      white-space: nowrap; // 防止文本换行
    }
  }
}

@keyframes stretchdelay {
  0%,
  100% {
    transform: scaleY(0.9);
    -webkit-transform: scaleY(0.9);
  }

  50% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
}
</style>